<template>
	<view class="filterWrapper">
		<!--<view class="title-padding"></view>-->
		<view class="filterHeader">
			<text class="pd" @tap="back()"></text>
			<text class="title">筛选</text>
			<view class="options">
				<button class="setting" @tap="changeDate()"></button>
			</view>
		</view>
		<view class="filterItem" type="primary" @tap="changeShow('QS_Picekr_date',0)">
			<text>
				起始日期
			</text>
			<text>
				{{startTime}}
			</text>
		</view>
		<view class="filterItem" type="primary" @tap="changeShow('QS_Picekr_date',1)">
			<text>
				终止日期
			</text>
			<text>
				{{endTime}}
			</text>
		</view>
		<view class="filterItem">
			<text>
				客户名称
			</text>
			<input type="text" placeholder="客户名称" v-model="ClientName" />
		</view>
		<view class="filterItem">
			<text>
				商品名称
			</text>
			<input type="text" placeholder="商品编号" v-model="GoodsName" />
		</view>
		<view class="filterItem">
			<text>
				仓库名称
			</text>
			<view class="selectInput">
				<xfl-select :list="list" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false" :style_Container="'height: 40px; font-size: 16px;'"
				 :placeholder="'placeholder'" :initValue="'仓库'" :selectHideType="'hideAll'" @change="getSelectValue($event)">
				</xfl-select>
			</view>
		</view>
		<QSpicker title="请选择日期时间" mode="bottom" type="date" ref="QS_Picekr_date" pickerId="date_1" :dataSet="dateSet"
		 showReset :autoHide="false" contentColor="#33cc33" :lineHeight=".05" @hideQSPicker="hideQSPicker($event)"
		 @showQSPicker="showQSPicker($event)" @confirm="confirm($event)" />
	</view>
</template>

<script>
	import QSpicker from '@/components/QuShe-picker/QuShe-picker.vue'
	import xflSelect from '../../components/xfl-select/xfl-select.vue'
	import * as Api from '@/syApis/syBb/apis.js'
	export default {
		components: {
			QSpicker,
			xflSelect
		},
		data() {
			return {
				dateSet: {
					dateMode: 3,
					dateFormatArray: ['-', '-', ' ', ':', ':']

				},
				startAndEndTime: 0,
				startTime: 0,
				endTime: 0,
				dateName: "",
				StoreID: "",
				GoodsName: "",
				ClientName:"",
				list: [],
				storeList: []
			};
		},
		created() {
			let date = new Date();
			this.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
			this.endTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
			this.GetStoreMessage();
		},
		methods: {
			//获取仓库
			GetStoreMessage() {
				let data = {};
				var _this = this;
				Api.GetStoreMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == '获取登录信息失败') {

						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg);
						} else {
							_this.list = [];
							_this.storeList = res.data.ResultMsg;
							for (let item in res.data.ResultMsg) {
								_this.list.push(res.data.ResultMsg[item].BranchName);
							}
						}
					} else {
						Api.ShowTip("服务器开小差了");
					}
				})
			},
			custormInput() {
				console.log(this);
			},
			//修改数据
			changeDate() {
				var pages = getCurrentPages(),
					prevPage = null;
				if (pages.length > 1) {
					prevPage = pages[pages.length - 2];
				}
				var that = this;
				let data = {
					StartDate:this.startTime,
					EndDate:this.endTime,
					StoreID:this.StoreID,
					GoodsName:this.GoodsName,
					ClientName:this.ClientName
				};
				this.$eventHub.$emit('fire',data);
				uni.navigateBack({
					delta: 1
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			changeShow(name, type) {
				this.startAndEndTime = type;
				this.$refs[name].show();
				this.dateName = name;
			},
			showQSPicker(res) {
				console.log(res);
			},
			hideQSPicker(res) {

			},
			confirm(res) {
				if (this.startAndEndTime == 0) {
					this.startTime = res.data;
				} else {
					this.endTime = res.data;
				}
				this.$refs[this.dateName].hide();
			},
			getSelectValue(res) {
				for (let item in this.storeList) {
					if (item == res.index) {
						this.StoreID = this.storeList[item].BranchID;
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	button::after {
		border: none;
		padding: 0px;
	}

	page {
		width: 100%;
		height: 100%;
		background: #ebebeb;
	}

	.filterWrapper {
		background: #FFF;
		padding-bottom: 15upx;
	}

	.title-padding {
		height: var(--status-bar-height);
		background: #031ae6;
		box-sizing: content-box;
	}

	.filterHeader {
		width: 100%;
		height: 50px;
		line-height: 50px;
		position: relative;
		text-align: center;
		background: #031ae6;
		color: #FFF;
		font-size: 18px;
		background-size: 100%;

		.pd {
			display: inline-block;
			position: absolute;
			margin-left: 10px;
			top: 30upx;
			left: 0px;
			font-size: 14px;
			width: 40upx;
			height: 40upx;
			background: url(../../static/back.png) no-repeat;
			background-size: 100%;
		}

		.options {
			position: absolute;
			right: 0px;
			top: 10px;
			width: 80px;
			display: flex;
			text-align: right;

			.setting {
				width: 30px;
				height: 30px;
				background: url(../../static/sureFilter.png) no-repeat;
				background-size: 30px;
				border: none;
				margin-left: 90upx;

			}
		}

	}

	.filterItem {
		height: 120upx;
		line-height: 120upx;
		background: #FFF;
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
		padding-left: 30upx;
		padding-right: 30upx;
		font-size: 32upx;
		background: #FFF;

		text {
			flex: 1;

			&:last-child {
				text-align: right;
			}
		}

		input {
			flex: 1;
			height: 60upx;
			line-height: 60upx;
			margin-top: 50upx;
			border-bottom: 1px solid #ebebeb;
		}

		view.selectInput {
			flex: 1;
			height: 60upx;
			line-height: 60upx;
			margin-top: 22upx;
			border-bottom: 1px solid #ebebeb;

			input {
				flex: 1;
				height: 40upx;
				line-height: 40upx;
				margin-top: 50upx;
				border-bottom: 1px solid #ebebeb;
			}
		}
	}
</style>
